<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/common.css" />
		<link rel="stylesheet" href="css/productlist.css" />
	</head>
	<body>
		<div class="header">
			<div class="nav">
				<div class="littletop"></div>
				<div class="navtitle">
					<div class="title">
						<a href="##" class="logo">
							<img src="img/logo.png" />
						</a>
						<div class="titlelist">
							<ul>
								<li>
									<a href="##">首页</a>
								</li>
								<li>
									<a href="##">手机数码</a>
								</li>
								<li>
									<a href="##">电脑办公</a>
								</li>
								<li>
									<a href="##">衣服用品</a>
								</li>
								<li>
									<a href="##">购物车</a>
								</li>
							</ul>
						</div>
						<div class="tatoo">
							<ul>
								<li>
									<a href="##" class="search">
										<i class="icon-search"></i>
										<input type="text" value="搜索" name="search" />
									</a>
								</li>
								<li>
									<a href="##" class="login">
										<i class="icon-login"></i>
										<span>登录</span>
									</a>
								</li>
								<li>
									<a href="##" class="cart">
										<i class="icon-cart"></i>
									</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="content">
			<div class="contenttitle">
				<ul>
					<li>
						<a href="##">网上商城 </a>
					</li>
					<li>&gt;</li>
					<li>
						<a href="##">智能手机  </a>
					</li>
				</ul>
			</div>
			<div class="listscreen">
				<div class="listsort">
					<div class="listtitle">
						<strong>分类</strong>
					</div>
					<div class="navlist">
						<a href="##" class="listtow">智能手机</a>
						<ul>
							<li>
								<a href="##">Galaxy S系列</a>
							</li>
							<li>
								<a href="##">Galaxy Note6系列</a>
							</li>
							<li>
								<a href="##">Galaxy A系列</a>
							</li>
						</ul>
					</div>
				</div>
				<div class="listsort">
					<div class="listtitle">
						<strong>价格</strong>
					</div>
					<div class="navlist">
						<ul class="floatclearfix">
							<li>
								<label>
									<i></i>
									1700-2399元
								</label>
							</li>
							<li>
								<label>
									<i></i>
									2400-3899元
								</label>
							</li>
							<li>
								<label>
									<i></i>
									3900-4799元
								</label>
							</li>
							<li>
								<label>
									<i></i>
									4800-6999元
								</label>
							</li>
							<li>
								<label>
									<i></i>
									6999元以上
								</label>
							</li>
						</ul>
					</div>
				</div>
				<div class="listsort">
					<div class="listtitle">
						<strong>颜色</strong>
					</div>
					<div class="navlist colorlist">
						<ul>
							<li>
								<a style="background:#000000">
								</a>
							</li>
							<li>
								<a style="background:#0f5eb9">
								</a>
							</li>
							<li>
								<a style="background:#fb0b0c">
								</a>
							</li>
							<li>
								<a style="background:#ffc6f4">
								</a>
							</li>
							<li>
								<a style="background:#a331bf">
								</a>
							</li>
							<li>
								<a style="background:#777777">
								</a>
							</li>
							<li>
								<a style="background:#ffffff">
								</a>
							</li>
							<li>
								<a style="background:#dbdbdb">
								</a>
							</li>
						</ul>
					</div>
				</div>
				<div class="listsort">
					<div class="listtitle">
						<strong>促销活动</strong>
					</div>
					<div class="navlist">
						<ul class="floatclearfix">
							<li>
								<label>
									<i></i>
									免息
								</label>
							</li>
							<li>
								<label>
									<i></i>
									立减
								</label>
							</li>
							<li>
								<label>
									<i></i>
									买赠
								</label>
							</li>
							<li>
								<label>
									<i></i>
									以旧换新
								</label>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="listcont">
				<div class="titlesrch">
					<span>智能手机(11)</span>
	            </div>
	            <div class="listcovert">
	            	<div class="listrowr">
	            		<div class="listboximg">
				            <a href="##">
				            	<img src="img/phone.jpg" />
				            </a> 
				            <div class="iconactivebox">
							    <label class="iconorange">
									<span>免息</span>  
								</label>
							    <label class="iconorange">
									<span>立减</span>  
								</label>
						</div>		
						<div class="listscroll">
							<div class="colorrol">
								<ul>
									<li>
										<a class="thumbnail" style="background:#ae719a"></a>
										</li>
									<li>
										<a class="thumbnail" style="background:#bc322f"></a>
										</li>
									<li>
										<a class="thumbnail" style="background:#61506a"></a>
										</li>
									<li>
										<a class="thumbnail" style="background:#859dcb"></a>
										</li>
									<li>
										<a class="thumbnail" style="background:#ecb6c1"></a>
										</li>
									</ul>
							</div>
					        <div class="productname">
						        <span>
							       <a href="##">Galaxy A6s</a>
						        </span>
						        <p class="listprice">￥1,799.00</p>
					        </div> 
				       </div>
					</div>
	            	</div>
	            	<div class="listrowr">
	            		<div class="listboximg">
				            <a href="##">
				            	<img src="img/phonelist5.jpg">
				            </a> 
				            <div class="iconactivebox">
							    <label class="iconorange">
									<span>免息</span>  
								</label>
							    <label class="iconorange">
									<span>立减</span>  
								</label>
						</div>		
						<div class="listscroll">
							<div class="colorrol">
								<ul>
									<li>
										<a class="thumbnail" style="background:#66343f"></a>
										</li>
									<li>
										<a class="thumbnail" style="background:#000000"></a>
										</li>
									<li>
										<a class="thumbnail" style="background:#61506a"></a>
										</li>
									<li>
										<a class="thumbnail" style="background:#859dcb"></a>
										</li>
									<li>
										<a class="thumbnail" style="background:#ecb6c1"></a>
										</li>
									</ul>
							</div>
					        <div class="productname">
						        <span>
							       <a href="##">盖乐世 S8</a>
						        </span>
						        <p class="listprice">￥3,999.00</p>
					        </div> 
				       </div>
					</div>
	            	</div>
	            	<div class="listrowr">
	            		<div class="listboximg">
				            <a href="##">
		 		            <img src="img/phonelist5.jpg">
				            </a> 
				            <div class="iconactivebox">
							    <label class="iconorange">
									<span>免息</span>  
								</label>
							    <label class="iconorange">
									<span>立减</span>  
								</label>
						</div>		
						<div class="listscroll">
							<div class="colorrol">
								<ul>
									<li>
										<a class="thumbnail" style="background:#66343f"></a>
										</li>
									<li>
										<a class="thumbnail" style="background:#000000"></a>
										</li>
									<li>
										<a class="thumbnail" style="background:#61506a"></a>
										</li>
									<li>
										<a class="thumbnail" style="background:#859dcb"></a>
										</li>
									<li>
										<a class="thumbnail" style="background:#ecb6c1"></a>
										</li>
									</ul>
							</div>
					        <div class="productname">
						        <span>
							       <a href="##">盖乐世 S8plus</a>
						        </span>
						        <p class="listprice">￥4,499.00</p>
					        </div> 
				       </div>
					</div>
	            	</div>
	            	<div class="listrowr">
	            		<div class="listboximg">
				            <a href="##">
				            	<img src="img/phonelist1.jpg">
				            </a> 
				            <div class="iconactivebox">
							    <label class="iconorange">
									<span>免息</span>  
								</label>
							    <label class="iconorange">
									<span>立减</span>  
								</label>
								<label class="changorange">
									<span>以旧换新</span>  
								</label>
						</div>		
						<div class="listscroll">
							<div class="colorrol">
								<ul style="margin-left: 31px;">
									<li>
										<a class="thumbnail" style="background:#848488"></a>
										</li>
									<li>
										<a class="thumbnail" style="background:#1f1e1e"></a>
										</li>
									<li>
										<a class="thumbnail" style="background:#1e6495"></a>
									</li>
									<li>
										<a class="thumbnail" style="background:#ADD8E6"></a>
									</li>
									</ul>
							</div>
					        <div class="productname">
						        <span>
							       <a href="##">Galaxy A8s</a>
						        </span>
						        <p class="listprice">￥2,799.00</p>
					        </div> 
				       </div>
					</div>
	            	</div>
	            	<div class="listrowr">
	            		<div class="listboximg">
				            <a href="##">
				            	<img src="img/phonelist2.jpg" />
				            </a> 
				            <div class="iconactivebox">
				            	<label class="changorange">
									<span>以旧换新</span>  
								</label>
							    <label class="iconorange">
									<span>免息</span>  
								</label>
							    <label class="iconorange">
									<span>立减</span>  
								</label>
						</div>		
						<div class="listscroll">
							<div class="colorrol">
								<ul style="margin-left: 31px;">
									<li>
										<a class="thumbnail" style="background:#226e97"></a>
										</li>
									<li>
										<a class="thumbnail" style="background:#ecb6c1"></a>
										</li>
									<li>
										<a class="thumbnail" style="background:#000000"></a>
										</li>
									<li>
										<a class="thumbnail" style="background:#859dcb"></a>
									</li>
									</ul>
							</div>
					        <div class="productname">
						        <span>
							       <a href="##">Galaxy A9s</a>
						        </span>
						        <p class="listprice">￥3,499.00</p>
					        </div> 
				       </div>
					</div>
	            	</div>
	            	<div class="listrowr">
	            		<div class="listboximg">
				            <a href="##">
				            	<img src="img/phonelist3.jpg" />
				            </a> 
				            <div class="iconactivebox">
							    <label class="iconorange">
									<span>免息</span>  
								</label>
								<label class="iconorange">
									<span>买赠</span>  
								</label>
							    <label class="iconorange">
									<span>立减</span>  
								</label>
						</div>		
						<div class="listscroll">
							<div class="colorrol">
								<ul>
									<li>
										<a class="thumbnail" style="background:#66343f"></a>
										</li>
									<li>
										<a class="thumbnail" style="background:#000000"></a>
										</li>
									<li>
										<a class="thumbnail" style="background:#606d9b"></a>
										</li>
									<li>
										<a class="thumbnail" style="background:#9e44b4"></a>
										</li>
									<li>
										<a class="thumbnail" style="background:#5e869f"></a>
										</li>
									</ul>
							</div>
					        <div class="productname">
						        <span>
							       <a href="##">Galaxy S9+</a>
						        </span>
						        <p class="listprice">￥5,499.00</p>
					        </div> 
				       </div>
					</div>
	            	</div>
	            	<div class="listrowr">
	            		<div class="listboximg">
				            <a href="##">
				            	<img src="img/phonelist3.jpg" />
				            </a> 
				            <div class="iconactivebox">
							    <label class="iconorange">
									<span>免息</span>  
								</label>
							    <label class="iconorange">
									<span>立减</span>  
								</label>
								<label class="changorange">
									<span>以旧换新</span>  
								</label>
						</div>		
						<div class="listscroll">
							<div class="colorrol">
								<ul>
									<li>
										<a class="thumbnail" style="background:#66343f"></a>
										</li>
									<li>
										<a class="thumbnail" style="background:#000000"></a>
										</li>
									<li>
										<a class="thumbnail" style="background:#606d9b"></a>
										</li>
									<li>
										<a class="thumbnail" style="background:#9e44b4"></a>
										</li>
									<li>
										<a class="thumbnail" style="background:#5e869f"></a>
										</li>
									</ul>
							</div>
					        <div class="productname">
						        <span>
							       <a href="##">Galaxy S9</a>
						        </span>
						        <p class="listprice">￥4,499.00</p>
					        </div> 
				       </div>
					</div>
	            	</div>
	            	<div class="listrowr">
	            		<div class="listboximg">
				            <a href="##">
				            	<img src="img/phonelist4.jpg" />
				            </a> 
				            <div class="iconactivebox">
							    <label class="iconorange">
									<span>免息</span>  
								</label>
							    <label class="iconorange">
									<span>立减</span>  
								</label>
								<label class="changorange">
									<span>以旧换新</span>  
								</label>
								<label class="iconorange">
									<span>买赠</span>  
								</label>
						</div>		
						<div class="listscroll">
							<div class="colorrol">
								<ul>
									<li>
										<a class="thumbnail" style="background:#000000"></a>
										</li>
									<li>
										<a class="thumbnail" style="background:#61506a"></a>
										</li>
									<li>
										<a class="thumbnail" style="background:#61506a"></a>
										</li>
									<li>
										<a class="thumbnail" style="background:#66343f"></a>
										</li>
									<li>
										<a class="thumbnail" style="background:#66343f"></a>
										</li>
									</ul>
							</div>
					        <div class="productname">
						        <span>
							       <a href="##">Galaxy Note9</a>
						        </span>
						        <p class="listprice">￥6,999.00</p>
					        </div> 
				       </div>
					</div>
	            	</div>
	            	<div class="listrowr">
	            		<div class="listboximg">
				            <a href="##">
				            	<img src="img/phonelist7.jpg" />
				            </a> 
				            <div class="iconactivebox">
							    <label class="iconorange">
									<span>免息</span>  
								</label>
							    <label class="iconorange">
									<span>立减</span>  
								</label>
						</div>		
						<div class="listscroll">
							<div class="colorrol">
								<ul>
									<li>
										<a class="thumbnail" style="background:#66343f"></a>
										</li>
									<li>
										<a class="thumbnail" style="background:#000000"></a>
										</li>
									<li>
										<a class="thumbnail" style="background:#61506a"></a>
										</li>
									<li>
										<a class="thumbnail" style="background:#859dcb"></a>
										</li>
									<li>
										<a class="thumbnail" style="background:#22446f"></a>
										</li>
									</ul>
							</div>
					        <div class="productname">
						        <span>
							       <a href="##">Galaxy A9 Star</a>
						        </span>
						        <p class="listprice">￥1,999.00</p>
					        </div> 
				       </div>
					</div>
	            	</div>
	            	<div class="listrowr">
	            		<div class="listboximg">
				            <a href="##">
				            	<img src="img/phonelist8.jpg" />
				            </a> 
				            <div class="iconactivebox">
							    <label class="iconorange">
									<span>免息</span>  
								</label>
							    <label class="iconorange">
									<span>立减</span>  
								</label>
						</div>		
						<div class="listscroll">
							<div class="colorrol">
								<ul>
									<li>
										<a class="thumbnail" style="background:#78a1e7"></a>
										</li>
									<li>
										<a class="thumbnail" style="background:#785e85"></a>
										</li>
									<li>
										<a class="thumbnail" style="background:#61506a"></a>
										</li>
									<li>
										<a class="thumbnail" style="background:#859dcb"></a>
										</li>
									<li>
										<a class="thumbnail" style="background:#ecb6c1"></a>
										</li>
									</ul>
							</div>
					        <div class="productname">
						        <span>
							       <a href="##">盖乐世 Note8</a>
						        </span>
						        <p class="listprice">￥6,988.00</p>
					        </div> 
				       </div>
					</div>
	            	</div>
	            </div>
			</div>
		</div>
		
		<div class="footer">
			<div class="footertop">
				<ul>
					<li>
						<a href="##" style="font-weight: bold;">我的三星</a>
					</li>
					<li>
						<a href="##">我的订单</a>
					</li>
					<li>
						<a href="##">我的评分</a>
					</li>
					<li>
						<a href="##">优惠券</a>
					</li>
					<li>
						<a href="##">个人资料</a>
					</li>
					<li>
						<a href="##">收货地点</a>
					</li>
					<li>
						<a href="##">售后网点查询</a>
					</li>
				</ul>
				<ul>
					<li>
						<a href="##" style="font-weight: bold;">网上购物商城</a>
					</li>
					<li>
						<a href="##">购物指南</a>
					</li>
					<li>
						<a href="##">支付方式</a>
					</li>
					<li>
						<a href="##">订单及发票</a>
					</li>
					<li>
						<a href="##">关于配送</a>
					</li>
					<li>
						<a href="##">售后服务</a>
					</li>
					<li>
						<a href="##">会员及优惠</a>
					</li>
				</ul>
				<ul>
					<li>
						<a href="##" style="font-weight: bold;">服务支持</a>
					</li>
					<li>
						<a href="##">常见问题</a>
					</li>
					<li>
						<a href="##">关于商城</a>
					</li>
					<li>
						<a href="##">关于三星</a>
					</li>
					<li>
						<a href="##">联系我们</a>
					</li>
					<li>
						<a href="##">使用条款</a>
					</li>
					<li>
						<a href="##">加为书签</a>
					</li>
				</ul> 
				<div class="way">
				<div class="sharing">官方分享</div>
			    <div class="sharingbtn">
				    <a href="##" class="weibo"></a>
				    <a href="##" class="wechat"></a>
			</div>
			</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
	<script type="text/javascript">
		$(".floatclearfix i").click(function(){
			$(this).css({
				"background-position": "-44px -408px"
			})
		})
	</script>
</html>
